<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <article id="ex">
  <h1>大大的标题</h1>

<img src="https://gitee.com/assd12138/cdnpics/raw/master/img/c5d34db9ef4eff9b14f892f3ea17c970487151de.png" alt="图片">

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dignissimos voluptatem nobis itaque cupiditate quaerat ab obcaecati ducimus aliquid quo vero iste corporis aperiam cum, laudantium aut tenetur. Molestiae, hic?</p>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Amet et ipsam nam, iusto sapiente voluptate eveniet itaque, voluptatum dolorum laboriosam quod expedita sit! Dolore, vitae quo architecto adipisci nesciunt temporibus! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nostrum, reiciendis sed pariatur quod minima fugiat nisi aspernatur voluptates eum architecto commodi quia ut reprehenderit iure nulla at facilis perferendis aliquid?</p>
<select id="select">
  <option value="none">无</option>
  <option value="left">左</option>
  <option value="right">右</option>
</select>
</article>
</body>
<style>
#ex{
  max-width: 900px;
  margin: 0 auto;
}
#ex img{
  float: left;
  width: 500px;
}
#ex p {
  line-height: 2;
  word-spacing: 0.1rem;
}
</style>
<script>
  let select = document.querySelector('#select')
  let img = document.querySelector('#ex img')
  select.addEventListener('change',(e)=>{
    img.style.float = e.target.value
  })
</script>
</html>